import { getListAsync, updateIssueTypeId } from '../redux/typeSlice.js'
import { useSelector, useDispatch } from 'react-redux'
import { useState, useEffect } from 'react'
import { Tag } from 'antd'
export default function TypeSelect() {
  const [tagContainer, setTagContainer] = useState([])
  const { typeList } = useSelector((state) => state.type)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const colorArr = ['#108ee9', '#2db7f5', '#f50', 'green', '#87d068', 'blue', 'red', 'purple']
  const dispatch = useDispatch()
  useEffect(() => {
    if (!typeList.length) {
      dispatch(getListAsync())
    } else if (typeList.length) {
      // 说明当前仓库已经存储了分类信息
      const arr = []
      arr.push(
        <Tag color="magenta" value="all" key="all" style={{ cursor: 'pointer' }} onClick={() => changeType('all')}>
          全部
        </Tag>
      )
      for (let i = 0; i < typeList.length; i++) {
        arr.push(
          <Tag color={colorArr[i % colorArr.length]} value={typeList[i]._id} key={typeList[i]._id} style={{ cursor: 'pointer' }} onClick={() => changeType(typeList[i]._id)}>
            {typeList[i].typeName}
          </Tag>
        )
      }
      setTagContainer(arr)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [typeList])
  const changeType = (id) => {
    dispatch(updateIssueTypeId(id))
  }
  return <div>{tagContainer}</div>
}
